<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p {
            font-size: 10pt;
            color: red;
            font-weight: bold;
        }

        h1 {
            font-size: 20pt;
            color: blue;
            font-weight: normal;
        }

        h2 {
            font-size: 30pt;
            color: green;
            font-weight: lighter;
        }
    </style>

    <style>
        span {
            background-color: DodgerBlue;
            color: #ffffff;
        }
    </style>
</head>

<body>

    <!-- CSS选择器 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors -->

    <!-- 元素选择器 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors -->
    <!-- CSS元素选择器(也称为类型选择器)通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素. -->


    <h1>Welcome to BookYourHotel website.</h1>
    <h2>This site is very user friendly.</h2>
    <p>This site gives information of all the hotels in USA.</p>
    <p>You can book your hotel while sitting in your room.</p>


    <span>这里是由 span 包裹的一些文字.</span>
    <p>这里是由 p 包裹的一些文字.</p>
</body>

</html>